import { useState, useEffect } from 'react'
import { Button, Input, Form } from 'antd'
import dayjs from 'dayjs'
import axios from 'axios'
  
interface TestProps {
  defaultNum?: number
}
interface Iuser {
  email?: string
}
  
const Test: React.FC<TestProps> = (props: TestProps) => {
  const { defaultNum } = props
  const [input, setInput] = useState('')
  const [users, setUsers] = useState<Iuser[] | []>([])
  const changeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput((prev) => {
      return e.target.value
    })
  }
  const getUsers = async() => {
    const { data } = await axios.get(`https://randomuser.me/api/?results=${input || defaultNum}`)
    setUsers(data.results)
    setInput('')
  }
  useEffect(() => {
    getUsers()
    return () => {
      console.log('s')
    }
  }, [])
  
  return (
    <div className="test">
      <Form onFinish={getUsers}>
        <Input.Group compact>
          <Input style={{ width: 'calc(50% - 0px)' }} 
          type={'number'} max={10} min={1}
          placeholder={'input number between 1 to 10'}
          value={input} onChange={changeInput} />
          <Button type='primary' htmlType='submit'>getUser {dayjs().format('YYYY-MM-DD HH:mm:ss')}</Button>
        </Input.Group>
      </Form>
      <ul>
        {users.map(obj => {
          return <li key={obj.email}>* {obj.email}</li>
        })}
      </ul>
    </div>
  )
}
  
Test.defaultProps = {
  defaultNum: 2
}
  
export default Test